<template>
	<view>
		<Setps :num='0' :headtitle='headtext' :tit='tit' />
		<view style="margin-bottom: 80rpx;">
			<!-- //步进器 -->

			<view class="formcard">
				<view class="bodtitle" style='border-bottom: none;display: flex;justify-content: space-between;'>
					<p style='flex: 3;'><b>是否取消出差</b><span style='color: red;'><b>*</b></span></p>
					<radio-group @change="radioChange" style="display: flex;justify-content: space-between;flex: 2;">
						<label v-for="(item, index) in items" :key="item.value">
							<view>
								<radio style="transform: scale(.7);" :value="item.value" :checked="index === current" />
								<view style="display: inline-block;padding-right: 10rpx;">
									<p>{{item.name}}</p>
								</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			
			<!-- 多行文本 -->
			<view class="formcard">
				<view class="bodtitle" style="border-bottom: none;">
					<p><b>变更说明<span style='color: red;'><b>*</b></span></b></p>
				</view>
				<view class="textarea" style="padding: 20rpx 20rpx;">
						<u--textarea maxlength='100' count v-model="textarea" border='none'
							placeholder="请输入出差变更原因"></u--textarea>
				</view>
			</view>
			
			<view class="formcard">
				<view class="bodtitle">
					<p><b>基本信息</b></p>
				</view>
				<u-form labelPosition="left" :model="usermodel" :rules="rules" ref="userform">
					<!-- 申请单号 -->
					<u-form-item labelWidth="200rpx" label="申请单号" prop="userInfo.orderId" borderBottom ref="item1">
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.orderId">
					</u-form-item>

					<!-- 申请人 -->
					<u-form-item labelWidth="200rpx" label="申请人" prop="userInfo.name" borderBottom ref="item2">
						<input class="pdlf" type="text" v-model="usermodel.userInfo.name">
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<!-- 员工编号 -->
					<u-form-item labelWidth="200rpx" label="员工编号" prop="userInfo.userId" borderBottom ref="item3">
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.userId">
					</u-form-item>

					<!-- 所在科室 -->
					<u-form-item labelWidth="200rpx" label="所在科室" prop="userInfo.work" borderBottom ref="item4">
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.work">
					</u-form-item>

					<!-- 出差地域 -->
					<u-form-item required labelWidth="200rpx" label="出差地域" prop="userInfo.address" borderBottom>
						<u-radio-group slot='right' v-model="addressradio" placement="row">
							<u-radio :customStyle="{marginLeft: '60rpx'}" v-for="(item, index) in addresslist"
								:key="index" :label="item.name" :name="item.name" @change="radioChange1">
							</u-radio>
						</u-radio-group>
					</u-form-item>

					<!-- 出差类型 -->
					<u-form-item  labelWidth="200rpx" label="出差类型" borderBottom>
						<input disabled class="pdlf" type="text" v-model="usermodel.userInfo.boole">
					</u-form-item>

					<!-- 出差日期 -->
					<u-form-item borderBottom labelWidth="200rpx" label="出差日期">

						<u-calendar @close="close()" :show="dateshow" :mode="mode" @confirm="date_confirm"></u-calendar>
						<input @click="dateshow= true" v-if="isdate" class="pdlf" type="text" disabled
							v-model="usermodel.userInfo.prpnum" placeholder="请选择">
						<view style="display: flex;" v-else>
							<view>
								<label>{{datetime}}</label>
							</view>

							<span style='padding: 0 20rpx;'>共{{day}}天</span>
							<view>
								<label>{{datetime1}}</label>
							</view>
						</view>
					</u-form-item>

					<!-- 是否入住酒店 -->
					<u-form-item borderBottom required labelWidth="210rpx" label="是否入住酒店">
						<p style='width: 100%;display: flex;justify-content: right;'>
							<u-switch v-model="usermodel.userInfo.isshop" size="20"></u-switch>
						</p>
					</u-form-item>

					<!-- 同行人数 -->
					<u-form-item  labelWidth="200rpx" label="同行人数" borderBottom>
						<input class="pdlf" type="text" v-model="usermodel.userInfo.prpnum" placeholder="请输入">
					</u-form-item>

					<!-- 是否携带电脑 -->
					<u-form-item borderBottom required labelWidth="210rpx" label="是否携带电脑">
						<p style='width: 100%;display: flex;justify-content: right;'>
							<u-switch v-model="usermodel.userInfo.iscmd" size="20"></u-switch>
						</p>
					</u-form-item>

					<!-- 台数 -->
					<u-form-item borderBottom labelWidth="210rpx" label="台数">
						<input class="pdlf" type="text" v-model="usermodel.userInfo.cmdnum" placeholder="请输入">
					</u-form-item>

					<!-- 携带人 -->
					<u-form-item borderBottom labelWidth="210rpx" label="携带人">
						<input type="text" v-model="usermodel.userInfo.xdr" disabled class="pdlf" placeholder="请选择">
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<!-- 出差地址 -->
					<u-form-item borderBottom required labelWidth="210rpx" label="出差地址">
						<input class="pdlf" type="text" v-model="usermodel.userInfo.ccdz" placeholder="请输入">
					</u-form-item>

					<!-- 多行文本 -->
					<view class="textarea">
						<p>出差事由<label style="color:red">*</label></p>
						<u-form-item style='font-size: red;' labelWidth="200rpx" prop="userInfo.textarea" borderBottom
							ref="item7">
							<u--textarea maxlength='200' count v-model="usermodel.userInfo.textarea" border='none'
								placeholder="请输入明确化出差事由"></u--textarea>

						</u-form-item>

						<span class='gup'>附件(0)</span>

						<view style='width: 90%;margin: 0 auto;margin-bottom: 30rpx;'>
							<view class="update">
								<p>
									<image src="@/static/newimg/fj.svg"></image>
									<span style='color: #007aff;padding-left: 10rpx;'>上传附件</span>
								</p>
							</view>
						</view>
					</view>

				</u-form>
			</view>

			<view class="bottom_setup">
				<view @click="nextapp" class="bottom_white">
					<u-button class="custom-style" type="primary" text="下一步(行程变更)"></u-button>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	export default {
		data() {
			return {
				items: [{
						value: 'true',
						name: '是',
						checked: 'true'
					},
					{
						value: 'false',
						name: '否'
					}
				],
				current: 1,
				textarea:'', //变更原因
				tit: [{
						name: '信息变更'
					},
					{
						name: '行程变更'
					},
					{
						name: '费用明细'
					},
					{
						name: '确认提交'
					},
				],
				//用户基本信息
				usermodel: {
					userInfo: {
						orderId: 'MCSQ2022064001',
						name: '张三',
						userId: '6666666',
						work: '所在科室-科室名称',
						address: '',
						date: '',
						textarea: '',
						boole: '工作出差',
						isshop: true,
						prpnim: '',
						iscmd: '',
						cmdnum: '',
						xdr: '',
						ccdz: ''
					},
				},
				//开始日期选择
				dateshow: false,
				mode: 'multiple',
				datetime: '选择日期',
				//结束日期选择
				datetime1: '选择日期',
				isdate: true,
				//表单正则效验
				rules: {
					// 单号正则
					'userInfo.orderId': [{
							required: true,
							message: '请填订单号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '请输入正确的订单号'
						}
					],
					//姓名正则
					'userInfo.name': [{
							required: true,
							message: '请填写姓名',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							// 正则检验前先将值转为字符串
							// transform(value) {
							// 	return String(value);
							// },
							message: '请填写您的的真实姓名'
						}
					],
					//员工编号正则
					'userInfo.userId': [{
							required: true,
							message: '输入您的员工编号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[A-Za-z0-9]+$/,
							message: '请输入正确的员工编号'
						}
					],
					//所在科室正则
					'userInfo.work': [{
							required: true,
							message: '输入您的科室名称',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							message: '请输入正确的科室名称'
						}
					],
					//日期
					'userInfo.date': [{
							required: true,
							message: '输入日期',
							trigger: ['blur', 'change']
						},
						{
							pattern: /\d{4}(\-|\/|.)\d{1,2}\1\d{1,2}/,
							message: '请输入正确的日期'
						},
					],
					// 出差理由  item7777
					'userInfo.textarea': [{
							required: true,
							message: '输入内容',
							trigger: ['blur', 'change']
						},
						{
							min: 6,
							max: 200,
							message: '内容过短'
						}
					],
				},
				headtext: '出差变更',
				value1: '',
				numa: 0, //步进器第几步，
				//地域单选框
				addresslist: [{
						name: '境内',
						disabled: false
					},
					{
						name: '境外',
						disabled: false
					},
				],
				// 默认选中
				addressradio: '境内',
				// 默认选中
				classradio: '境内',
				day: 0, //出差天数
			}
		},
		methods: {
			rightClick() {
				console.log('暂存')
			},
			//出差地域
			radioChange1(n) {
				console.log('出差类型', n);
			},
			nextapp() {
				uni.navigateTo({
					url: './application?ob=' + JSON.stringify(this.usermodel)
				})
				// this.$refs.userform.validate().then(res => {
				// 	uni.$u.toast('校验通过')
				// 	this.$jump('./application', 'navigate');
				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// 	this.$jump('./application', 'navigate');
				// })
			},
			// 开始日期选择
			date_confirm(e) {
				this.isdate = false
				console.log(e.length, e)
				let index = e.length - 1
				this.datetime = e[0]
				this.datetime1 = e[index]
				this.dateshow = false
				this.day = index
			},
			close() {
				this.dateshow = false
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						console.log(this.items[i].value)
						break;
					}
				}
			}
		},
		components: {
			Setps,
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-family: pf
	}

	.custom-style {
		height: 90rpx;
		background-color: #007aff;
	}


	.bottom_setup {
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 20rpx;
		padding: 35rpx 0;
		box-sizing: border-box;

		.bottom_white {
			width: 90%;
			margin: 0 auto;
		}
	}




	.u-textarea {
		background-color: #fafafa;
		margin: 10rpx 0;
	}

	.conton {
		margin-left: 20rpx;
		width: 340rpx;
	}

	.pdlf {
		width: 100%;
	}

	.textarea {
		display: flex;
		flex-direction: column;

		p {
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
			font-size: 30rpx;
		}

		.gup {
			margin: 50rpx 0;
			padding-left: 30rpx;
			margin-top: 20rpx;
			color: #666666;
		}
	}

	.update {
		width: 100%;
		height: 80rpx;
		border: 1px solid #007aff;
		border-radius: 4px;

		p {
			text-align: center;

			image {
				width: 40rpx;
				height: 40rpx;
				vertical-align: bottom;
			}
		}
	}
</style>
